<template>
    <a-layout>
        <a-layout-content class="content">
            <a-row>
                <!--个人信息-->
                <a-col class="info" :xs="{ span: 0 }" :md="{ span: 4, offset: 2 }">
                    <div class="infoImg">
                        <img :src="users.usersHead" width="65%"/>
                    </div>
                    <div class="infoContent" align="center">
                        <h3>
                            {{ users.usersName }}
                        </h3>
                        <div class="motto" style="padding: 10px 0;">
                            {{ users.usersMotto }}
                        </div>
                        <a :href="users.usersGithubWebsite">GitHub</a> ●
                        <a :href="users.usersGiteeWebsite">Gitee</a> ●
                        <a :href="users.usersBlogWebsite">Blog</a>
                    </div>
                </a-col>

                <!--文章列表-->
                <a-col class="list" :xs="{ span: 24 }" :md="{ span: 16 }">
                    <ArticleList :data="articles"/>
                </a-col>

                <!--分页控件-->
                <a-col span="24" style="text-align: center">
                    <a-pagination v-show="pagination.totalPage > 1"
                                  simple :default-current="1"
                                  :current="pagination.pageNum"
                                  :pageSize="pagination.pageSize"
                                  :total="pagination.totle" @change="getDatas"/>
                </a-col>

            </a-row>
        </a-layout-content>
        <a-back-top />
    </a-layout>
</template>

<script>
    import { requestUsersInfo, requsetArticleList } from "../../network/request";

    import ArticleList from "./ArticleList";
    export default {
        name: "index",
        components: {ArticleList},
        data() {
            return {
                users: {},
                articles: [],
                current: 2,
                pagination: {
                    pageNum: 1,
                    pageSize: 10,
                    totle: 0,
                    totalPage: 0
                }
            }
        },
        created() {
            //获取文章列表
            requsetArticleList(1, this.pagination.pageSize).then(req => {
                this.articles = req.list;
                this.pagination.totle = req.total
                this.pagination.pageNum = req.currPage
                this.pagination.totalPage = req.totalPage
                // console.log(req);
                // console.log(this.articles);
                // console.log(this.pagination);
            });
            //获取用户信息
            requestUsersInfo().then(req => {
                this.users = req;
            })
        },
        methods: {
            getDatas(page, pageSize) {
                // console.log(pageSize + " : " + page);
                requsetArticleList(page, pageSize).then(req => {
                    this.articles = req.list;
                    this.pagination.totle = req.total
                    this.pagination.pageNum = req.currPage
                    this.pagination.totalPage = req.totalPage
                });
            },
        }
    }
</script>

<style scoped>
    .info {
        border-right: 1px solid var(--my-gary);
    }
    .infoImg {
        padding: 10px 0;
        text-align: center;
    }
    .list {
        font-size: var(--h5);
        padding: 10px 30px;
    }
</style>
